<template>
  <!-- about -->
  <div class="about">
    <a class="bg_links social portfolio" href="https://gitee.com/siri729_admin/node-mysql-backend" target="_blank">
      <span class="icon"></span>
    </a>
    <!--    <a class="bg_links social dribbble" href="" target="_blank">-->
    <!--      <span class="icon"></span>-->
    <!--    </a>-->
    <!--    <a class="bg_links social linkedin" href="" target="_blank">-->
    <!--      <span class="icon"></span>-->
    <!--    </a>-->
    <a class="bg_links logo"></a>
  </div>
  <!-- end about -->

  <nav>
    <div class="menu">
      <p class="website_name">{{ appName || "Vite Vue3 Admin" }}</p>

      <div class="menu_icon">
        <span class="icon"></span>
      </div>
    </div>
  </nav>

  <section class="wrapper">
    <div class="container h-full">
      <div id="scene" class="scene" data-hover-only="false">
        <div class="circle" data-depth="1.2"></div>

        <div class="one" data-depth="0.9">
          <div class="content">
            <span class="piece"></span>
            <span class="piece"></span>
            <span class="piece"></span>
          </div>
        </div>

        <div class="two" data-depth="0.60">
          <div class="content">
            <span class="piece"></span>
            <span class="piece"></span>
            <span class="piece"></span>
          </div>
        </div>

        <div class="three" data-depth="0.40">
          <div class="content">
            <span class="piece"></span>
            <span class="piece"></span>
            <span class="piece"></span>
          </div>
        </div>

        <p class="p404" data-depth="0.50">404</p>
        <p class="p404" data-depth="0.10">404</p>
      </div>

      <div class="text">
        <article>
          <p>非常抱歉,您要找的资源好像跑丢了,要不去看看别的吧~</p>
          <button @click="router.replace(HOME_URL)">好的!</button>
        </article>
      </div>
    </div>
  </section>
</template>

<script setup>
const router = useRouter();

const appName = computed(() => {
  return import.meta.env.VITE_APP_NAME;
});
</script>

<style src="./style/style.css" scoped></style>